<template>
  <div class="contentWrapper wpx1200" id="contentWrapper">
    <el-card class="box-card mt20">
		  <div slot="header" class="clearfix">
		    <span>检测词包设置</span>
		  </div>
		  <div class="clearFix" v-loading="loading">
				<el-card class="box-card mt20 smallCard" v-for="(item,index) in list" :key="index">
				  <div slot="header" class="clearfix">
				    <span v-text="item.wordName"></span>
				    <!--<router-link to="/settingDetail#modifyword">-->
				    	<i class="el-icon-edit floatr" @click="toDetail(item)"></i>
				    	<i class="el-icon-delete cursor floatr mr10" @click="deleteItem(item.wordId)"></i>
				    <!--</router-link>-->
				  </div>
				  <div class="jiu" v-text="item.wordTxt.length>70?(item.wordTxt).substring(0,70)+'...':item.wordTxt"></div>
				</el-card>
				<el-card class="box-card mt20 smallCard">
				  <div slot="header" class="clearfix">
				    <span>自定义</span>
				  </div>
				  <router-link to="/settingDetail">
				  <div class="jiu add">
						<span>+</span>
				  </div>
				  </router-link>
				</el-card>
		  </div>
		</el-card>
  </div>
</template>

<script>
import MsgBus from '@/components/bus.js';
import API from "@/api"
export default {
  name: 'setting',
  data () {
    return {
    	list: [],
    	loading: true
    }
  },
  mounted: function () {
  	setMinHeight("contentWrapper")
  	this.getList()
  	$(window).resize(function() {
		  setMinHeight("contentWrapper")
		});
  },
   methods: {
	  getList(){
	  	API.setting.getList(API.header.getCookie("token")).then(({data}) => {
	  		this.loading = false
	       if(data.code=='0'){
						this.list = data.data;
	       }else{
						this.$message.error(data.msg);
	       }
      })
	  },
	  toDetail(data) {
	    sessionStorage.setItem("setdata",JSON.stringify(data))
	  	this.$router.push({
	      name: 'settingDetail',
	    })
	  },
	  deleteItem(id){
//	  	console.error(id)
	  	this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error',
          lockScroll: false
        }).then(() => {
        	var info = {
        		token: API.header.getCookie("token"),
        		id:id
        	}
        	API.setting.deleteWord(info).then(({data}) => {
			       if(data.code=='0'){
									this.$message({
				            type: 'success',
				            message: '删除成功!'
				          });
				          this.getList()
			       }else{
								this.$message.error(data.msg);
			       }
		      })
        }).catch(() => {});
	  }
	}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#app {
		/*text-align: left;*/
	}
	.smallCard {
		width: 260px;
    height: 183px;
    margin: 13px;
    float: left;
	
	}
	div.jiu {
		height: 105px;
		overflow: hidden;
	}
	.add{
		font-size: 70px;
    text-align: center;
    line-height: 105px;
    cursor: pointer;
	}
	.add span {
	    position: relative;
    	top: -10px;
	}
	.el-icon-edit {
		/*margin-left: 133px;*/
    cursor: pointer;
    margin-right: 10px;
	}
	.el-icon-edit:before {
    content: "\E61C";
    color: #000;
	}
</style>
